<style>
    .out{
        background-color: #fff;
        border: 1px solid #888;
        width:99%;
        color:#444;
    }
</style>
<div class='title'>可拖拽元素</div>
<div class="sub">
    <div class='text' jshow='!{{$.showRes}}'>移动端暂不支持</div>
    <div class='text'>
    请看两个例子：</div>
    <div class='title'>全部可拖拽</div>
    <div jshow='showRes' class="j-drag" style='top:100px'>
        我是可拖拽元素
    </div>
    <div class='text'>
        <div class='j-code' disabled width='99%' height='auto'>  
&lt;div class="j-drag" style='top:100px'>
    我是可拖拽元素
&lt;/div>
        </div>
    </div>

    <div class='title'>定义可拖拽区域</div>
    <div jshow='showRes' class="j-drag" style='top:500px'>
        <div class="j-drag-area" style='background-color:#ccc'>只有在这个区域拖拽才行</div>
        <div>其他区域不行</div>
    </div>
    <div class='text'>
        <div class='j-code' disabled width='99%' height='auto'>
&lt;div class="j-drag" style='top:500px'>
    &lt;div class="j-drag-area" style='background-color:#ccc'>只有在这个区域拖拽才行&lt;/div>
    &lt;div>其他区域不行&lt;/div>
&lt;/div>
        </div>
    </div>
</div>

<script>
    new Jet({
        data:{
            showRes:function(){
                return !$J.isMobile();
            }
        }
    });
</script>